<template>
  <div class="loginBox">
    <div class="loginCont">
      <div class="loginContCenter">
        <div class="top">
          <!-- <img src="../../assets/images/leftImg.png" /> -->
        </div>
        <h1>欢迎登录MES智能制造系统</h1>
        <div class="contentBoxConst">
          <div class="usernameStyle">
            <div class="leftImg">
              <img src="../../assets/images/name.png" />
            </div>
            <van-field v-model.trim="form.account" placeholder="请输入用户名" @keyup.enter.native="submitForm" />
          </div>
          <div class="passwordStyle">
            <div class="leftImg">
              <img src="../../assets/images/password.png" />
            </div>
            <van-field v-model.trim="form.password" type="password" placeholder="请输入密码" @keyup.enter.native="submitForm" />
          </div>
          <div class="signInBtn">
            <van-button v-noMoreClick type="primary" size="large" @click="submitForm">登录</van-button>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="show" class="popupStyle">
      <div class="loader">
        <span class="text">Loading</span>
        <span class="spinner" />
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  name: 'Login',
  data() {
    return {
      show: false,
      form: {
        account: '10001',
        password: '123456',
        grantType: 'password' // 验证方式 密码 password/card
      }
    }
  },
  mounted() {},
  methods: {
    async submitForm() {
      // this.$router.push('./Task')
      if (!this.form.account) {
        this.$notify({
          type: 'warning',
          message: '请输入用户名',
          duration: 1800
        })
        return
      }
      if (!this.form.password) {
        this.$notify({
          type: 'warning',
          message: '请输入密码',
          duration: 1800
        })
        return
      }
      this.show = true
      this.$axios
        .post(`/dobo-auth/token`, this.form)
        .then((res) => {
          console.log(res)
          if (res.data.code === 400) {
            this.show = false
            this.$notify({
              type: 'danger',
              message: '用户名或密码错误',
              duration: 5000
            })
          }
          if (res.data.code === 200) {
            localStorage.setItem(
              'padUserInfo',
              JSON.stringify({
                account: this.form.account,
                password: this.form.password,
                time: new Date().getTime(),
                data: res.data.data
              })
            )
            localStorage.setItem('EMEStoken', res.data.data.accessToken)
            setTimeout(() => {
              this.$router.push('./Task')
              this.show = false
              this.$toast.success('登录成功')
            }, 1000)
          } else {
            this.$message.error(res.msg)
            this.show = false
          }
        })
        .catch(() => {
          this.show = false
        })
    }
  }
}
</script>
<style lang='scss' scoped>
.loginBox {
  width: 100vw;
  background: url(../../assets/images/bg.jpg) no-repeat center;
  background-size: cover;
  height: 100vh;
  // overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  .loginCont {
    width: 75vw;
    height: 75vh;
    background: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    .loginContCenter {
      width: 50vw;
      height: 65vh;
      h1 {
        font-size: 28px;
        color: #022566;
        text-align: center;
        height: 4vh;
        margin: 3vh 0;
      }
      .top {
        width: 50vw;
        height: 25vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url(../../assets/images/leftImg.png) no-repeat center;
        background-size: 100% auto;
      }
      .contentBoxConst {
        height: 25vh;
        .usernameStyle,
        .passwordStyle {
          position: relative;
          height: 23%;
          margin: 6% 0;
          .van-field {
            font-size: 18px;
            height: 100%;
          }
          .leftImg {
            position: absolute;
            z-index: 9;
            width: 30px;
            top: 0;
            left: 10px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            img {
              width: 30px;
              height: auto;
            }
          }
        }
        .usernameStyle {
          .van-field {
            position: absolute;
            left: 0;
            top: 0;
            border: 2px solid #022566;
            border-radius: 5px;
            color: #022566;
          }
          .van-cell {
            padding: 0;
          }
        }
        .passwordStyle {
          .van-field {
            position: absolute;
            left: 0;
            top: 0;
            border: 2px solid #cdcdcd;
            border-radius: 5px;
            color: #cdcdcd;
          }
          .van-cell {
            padding: 0;
          }
        }
        .signInBtn {
          height: 23%;
          .van-button {
            background: #022566;
            border: 1px solid #022566;
            border-radius: 20px;
            height: 100%;
            font-size: 25px;
          }
        }
      }
    }
  }
}
</style>
<style lang='scss'>
.usernameStyle,
.passwordStyle {
  .van-field__control {
    padding-left: 50px;
    height: 100%;
  }
  .van-field__body {
    height: 100%;
  }
  input::placeholder {
    // color: #022566;
  }
  /* input默认密码有背景（修改一下） */
  input:-webkit-autofill,
  textarea:-webkit-autofill,
  select:-webkit-autofill {
    -webkit-text-fill-color: #333 !important;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    background-color: transparent;
    background-image: none;
    transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时
  }
}
</style>
